<template>
    <div class="EchartPractice">
        <div ref="main" id="main"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {

    name: "EchartPractice",
    methods: {
        drawChart() {
            // init()第一个参数dom节点，第二个参数为主题
            let myEchart = echarts.init(this.$refs.main, 'dark');
            var xDataArr = ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强']
            var yDataArr = [88, 92, 63, 77, 94, 80, 72, 86]
            var option = {
                xAxis: {
                    type: 'category',
                    data: xDataArr,
                },
                yAxis: {
                    type: 'value',

                },
                series: [
                    {
                        name: '语文',
                        type: 'bar',
                        markPoint: {
                            data: [
                                {
                                    type: 'max', name: '最大值'
                                }, {
                                    type: 'min', name: '最小值'
                                }
                            ]
                        },
                        markLine: {
                            data: [
                                {
                                    type: 'average', name: '平均值'
                                }
                            ]
                        },
                        data: yDataArr// 数据
                    }
                ]
            }
            myEchart.setOption(option);
        }
    },
    mounted() {
        this.drawChart();
    }
}
</script>

<style scoped>
#main {
    width: 600px;
    height: 400px;
    margin: auto;
    margin-top: 100px
}
</style>

